<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import HomePanel from '@/views/Home/component/HomePanel.vue'
import Goodsitem from '@/components/Goodsitem.vue'
import {Goods} from '@/apis/goods'
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';//获取当前路由
const route = useRoute();
const Sid = route.params.id; 
const data=ref({})

const getGoods=async()=>{
  const res=await Goods(Sid)
  data.value=res.data
}

onMounted(()=>getGoods())

</script>

<template>
  <div class="container">
    <div class="sub-container"  :key="data.id">
      <HomePanel
        :title="data.priCategory"
        :sub-title="data.name"
      >
        <div class="body">
            <Goodsitem v-for="good in data.goods" :good="good"  :key="good.id"/>
        </div>
      </HomePanel>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.container {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background: transparent;  /* 设置背景透明 */
  border: none;             /* 清除任何可能的边框 */
  box-shadow: none;
  width: 100%;
}

.sub-container{
  padding: 20px 10px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  width: 900px;
  
  

 
  .body{
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }
}

</style>
